(function (jq) {
    var rquestURL;
    // 在原型中为字符串创建format方法，用于字符串格式化
    String.prototype.format = function (args) {
        return this.replace(/\{(\w+)\}/g, function (s,i) {
            // args: {m: "快递", n: "hostname"}
            // console.log(s,i,args); {m} m {m: 11, n: "hostname"}
            return args[i];
        });
    };

    function init() {
        //获取要显示的列
        //获取数据
        $.ajax({
            url: rquestURL,
            type:'GET',
            dataType: 'JSON',
            success:function (arg) {
                if(arg.status){
                    createTablehead(arg.data.table_config);
                    createTableBody(arg.data.table_config,arg.data.data_list);
                    /*  data_list 数据库查询结果
                    */
                }else {
                    alert(arg.message);
                }
            }
        })
    }

    function createTablehead(config) {
        /* table_config:
        包含下面2个对象：
            {
                'title':'主机名',
                'display':0,
            },
            {
                'title':'端口',
                'display':1,
            }

        */
        var tr = $('<tr></tr>');
        $.each(config, function (k, v) {
            if (v.display){
                var th = $('<th></th>');
                th.html(v.title);
                tr.append(th);
            }
        });
        $('thead').append(tr)

    }

    function createTableBody(tableConfig, dataList) {
        /*
        dataList = [{'hostname': 'c1.com', 'port': 11}, {'hostname': 'c2.com', 'port': 23}]
        tableConfig = [      tableConfig并非列表，是两个字典对象
            {
                'q': 'hostname'
                'title':'主机名',
                'display':0,
            },
            {
                'q': 'port'
                'title':'端口',
                'display':1,
            },
            {
                'q': None,
                'title': '操作',
                'display': 1,
            }
        ]
        */
        $.each(dataList, function (k1,row) {
            // row = {'hostname': 'c1.com', 'port': 11}
            // var tr = $('<tr></tr>');
            var tr = document.createElement('tr');
            $.each(tableConfig, function (k2, configItem){
                if(configItem.display){
                    /*
                    configItem={
                        'q': 'hostname'
                        'title':'主机名',
                        'display':0,
                        'text':{'content': '{n}-{m}', 'kwargs':{'n': 'hostname', 'm': '@hostname'}}
                        'attr':{'k1': 'v1', 'k2': 'v2'},
                    }
                    */
                    var td = $('<td></td>');
                    var kwargs = {};
                    $.each(configItem.text.kwargs, function (key, value) {
                        if(value.startsWith('@')){
                            var tmp = value.substring(1, value.length);
                            kwargs[key] = row[tmp]
                        }else{
                            kwargs[key] = value;
                        }
                    });
                    // console.log(kwargs); {m: "快递", n: "hostname"}
                    con = configItem.text.content.format(kwargs);
                    td.html(con);

                    $.each(configItem.attr, function (k,v) {
                        if(v.startsWith('@')){
                            var tmp = v.substring(1, v.length);
                            td.attr(k,row[tmp]);            // 注意这里不是$('td') (每次循环会修改所有td标签)， 切记！！！！
                        }else{
                            td.attr(k,v);
                        }
                    });

                    $(tr).append(td);
                }
            });

            $('tbody').append(tr);
        })


    }

    jq.extend({
        'myfunc':function (url) {
            rquestURL = url;
            init();
        }
    })
})(jQuery);



